import React, { useState } from "react";
//  useState  返回的这个set函数 返回两个值
// 比如
// const {list,setList}=useState(0)
// setList 函数可以接受以下两种参数形式：
// 1.新的状态值：可以是任何新的值，例如基本数据类型（如字符串、数字、布尔值）或对象。 setList(newValue);
// 2. 函数形式的更新：

// this.setState(
//   (prevState, props) => {
//     // 通过回调函数计算新状态
//     return { count: prevState.count + 1 };
//   },
//   () => {
//     // 可选回调，状态更新完后执行
//     console.log("更新完成", this.state.count);
//   }
// );

/**
 * 只能在组件内使用
 * useStateCase  参数为变量的初始值
 * return 返回一个数组   count为设置的变量 setCount为改变变量的方法
 *
 * UseState 直接传值 vs 函数返回值
 * function generateLargeArray() {
  console.log('Generating array...');
  return new Array(1000000).fill(0);
}
直接传值
const [state, setState] = useState(generateLargeArray());
这里 generateLargeArray() 会 每次组件渲染都执行。
如果函数很耗时，会影响性能。
传函数（lazy initializer）
const [state, setState] = useState(() => generateLargeArray());
这里 传的是函数本身，React 会在 第一次渲染时调用这个函数来获取初始状态。
后续渲染不会再调用。
适用于 计算初始状态耗时或复杂 的场景。
✅ 规则总结：

方式	调用时机	性能	适用场景
useState(value)	每次渲染都会计算	差	简单初始值
useState(() => value)	只在初次渲染调用	好	复杂计算初始值
 */

function UseStateCase() {
  // zzks作为一个解构变量不能直接修改不会触发视图更新 使用usestate是传递一个新的变量 是替代而不是修改
  const [zzks, setCount] = useState(0);
  function add() {
    setCount(zzks + 1);
  }
  return (
    <div className="list">
      <h2>useState的使用</h2>

      <button onClick={add}>变量+1------{zzks}</button>
    </div>
  );
}

function UseStateCaseObj() {
  const [obj, setCount] = useState({
    name: "jack",
  });
  function add() {
    setCount({
      ...obj,
      name: "zzks",
    });
  }
  return (
    <div className="list">
      <h2>useState的使用</h2>
      <button onClick={add}>对象类型的改变------{obj.name}</button>
    </div>
  );
}
function UseStateCaseAarr() {
  const [arr, setArr] = useState([
    {
      id: 1,
      name: "jack",
      age: 18,
    },
    {
      id: 2,
      name: "jacksssss",
      age: 18,
    },
  ]);
  function add() {
    let tem = [];
    tem.push({
      id: Math.random() * 10,
      name: "zzks",
      age: 18,
    });
    setArr([...arr, ...tem]);
  }
  return (
    <div className="list">
      <h2>useState的使用</h2>
      <button onClick={add}>数组类型的改变————添加数据</button>

      {arr.map((item) => (
        <p key={item.id}>
          id:{item.id}————name:{item.name}
        </p>
      ))}
    </div>
  );
}
const utils = {
  UseStateCase,
  UseStateCaseObj,
  UseStateCaseAarr,
};
export default utils;
